<template lang="pug">
.start-remind-frame(v-if="getStartData && getShowStatus")
  .wrap
    CtrlBar(v-if="showType == 'video'", @closeBar='handleClose')
    video#startVideo(
      ref="videoWrap",
      loop,
      preload,
      autoplay="true",
      controls,
      webkit-playsinline='true',
      playsinline='true',
      x5-playsinline="true"
      v-if="showType == 'video'",
      :src="getStartData",
      style="background-color: #444;"
    )
    img(v-else, :src="getStartData", @click="handleClose")
</template>

<script>
import { mapGetters } from 'vuex'
import CtrlBar from '@/components/CtrlBar'
import { isIos } from '@/utils'
import { initBgMusic, updateBgMusicStatus } from '@/utils/audio'

let timer
// style="background: url(static/images/vd.jpeg) no-repeat; background-size: 100% 100%;"
// static/images/vd.jpeg http://editor.vgoyun.cn/krpano/images/vd.jpg
export default {
  components: {
    CtrlBar
  },
  props: {
    showloading: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      isShow: false,
      showType: '',
      timer: null,
      videoDom: null,
      changeValue: null,
    }
  },
  computed: {
    ...mapGetters(['startPicOrVideo', 'hotspots']),
    getShowStatus() {
      // ishideall=1时隐藏提示
      if (window.location.hash.indexOf('ishideall=1') !== -1) {
        return false
      }
      return this.isShow
    },
    getStartData() {
      if(this.startPicOrVideo) {
        let re = /mp4|AVI|wma|rmvb|mid|3GP/i
        if(re.test(this.startPicOrVideo)) {
          this.showType = 'video'
        } else {
          this.showType = 'image'
        }
        return this.startPicOrVideo
      }
    },
  },
  mounted() {
    let self = this

    document.addEventListener('WeixinJSBridgeReady',  function() {
      setTimeout(() => {
        self.touchstartAction()
      }, 3500)
    }, false)

    this.$nextTick(() => {
      document.body.addEventListener('touchstart', this.touchstartAction, false)
      // 定时开启，而不是一开始就显示
      setTimeout(() => {
        this.showStartDom()
      }, 3000)
    })
  },
  beforeDestroy() {
    document.body.removeEventListener('touchstart', this.touchstartAction)
  },
  methods: {
    showStartDom () {
      this.isShow = true
      // 初始化视频
      if (this.$refs && this.$refs.videoWrap) {
        this.$refs.videoWrap.play()
      } else {
        // 定时关闭
        timer = setTimeout(() => {
          if(this.showType == 'image') {
            this.handleClose()
          }
        }, 3000)
      }
    },
    // 触摸触发
    touchstartAction() {
      setTimeout(() => {
        if (this.$refs && this.$refs.videoWrap) {
          this.$refs.videoWrap.play()
        }
      }, 100)
    },
    hasVideoInHotspot () {
      let isInit = false
      const id = $VM.$krp.getSceneId()
      if (this.hotspots && this.hotspots[id] && this.hotspots[id].hotspotlist && this.hotspots[id].hotspotlist.length > 0) {
        const hotspotlist = this.hotspots[id].hotspotlist
        hotspotlist.map(item => {
          // 处理音乐重叠
          if (item.diy_id == 0 && item.type_id == 9) {
            isInit = true
          }
        })
      }
      return isInit
    },
    handleClose() {
      this.isShow = false

      if (this.showType == 'image') {
        clearTimeout(timer)
      } else {
        if (!this.hasVideoInHotspot() || isIos()) {
          initBgMusic()
        } else {
          updateBgMusicStatus()
        }
      }
    },
  },
}
</script>

<style lang="stylus">
@import '../../assets/styles/mixin.styl'
.start-remind-frame, .start-remind-frame > .wrap
  full-cover()
  z-index: 99
</style>
